import React, { useEffect } from "react";
import MyChart from "@/components/Charts";
import service from "@/service/httpAxios";
import { Idownloads } from "@/types/type";

const WebChart: React.FC = () => {
  const [reactDown, setReactdown] = React.useState<Idownloads>({
    downloads: [{ downloads: 0, day: "" }],
    start: "",
    end: "",
    package: "",
  });
  const [vueDown, setVueDown] = React.useState({
    downloads: [{ downloads: 0, day: "" }],
    start: "",
    end: "",
    package: "",
  });
  const [angularDown, setAngularDown] = React.useState({
    downloads: [{ downloads: 0, day: "" }],
    start: "",
    end: "",
    package: "",
  });
  useEffect(() => {
    service.get("/down", { params: { frame: "react" } }).then((res: any) => {
      setReactdown(res.data);
    });
    service.get("/down", { params: { frame: "vue" } }).then((res: any) => {
      setVueDown(res.data);
    });
    service.get("/down", { params: { frame: "angular" } }).then((res: any) => {
      setAngularDown(res.data);
    });
  }, []);
  return (
    <div
      style={{
        marginTop: "3rem",
        padding: " 2rem",
        border: "1px solid #CCC",
        borderRadius: 16,
      }}
    >
      <MyChart
        reactDown={reactDown}
        vueDown={vueDown}
        angularDown={angularDown}
      />
    </div>
  );
};

export default WebChart;
